<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-03-01 16:20:10"
-->
<template>
  <div>
    <v-menu offset-y v-model="createMenu" :close-on-content-click="false">
      <template v-slot:activator="{ on }">
        <v-btn v-on="on" small color="primary" :loading="loading">新建标签</v-btn>
      </template>
      <v-card>
        <v-card-title>新建标签名称</v-card-title>
        <v-card-text>
          <v-text-field :loading="createLoading" required v-model="createName" placeholder="输入标签名称"></v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-btn color="primary" @click="createTag">确定</v-btn>
          <v-btn @click="createMenu = false">取消</v-btn>
        </v-card-actions>
      </v-card>
    </v-menu>
    <v-progress-circular indeterminate color="primary" v-if="loading"></v-progress-circular>
    <v-list dense v-else>
      <v-list-item dense @click="selectTag({ id: null })"><v-list-item-title>全部</v-list-item-title></v-list-item>
      <template  v-for="item in tagItems" >
        <v-hover v-slot:default="{ hover }" open-delay="200" :key="item.id" :height="40">
        <v-list-item dense>
          <v-list-item-title @click="selectTag(item)">{{item.name}}({{item.count}})</v-list-item-title>
          <v-list-item-action v-show="hover">
            <v-row>
              <v-col cols="6">
                <MemberTagsEdit :item="item"/>
              </v-col>
              <v-col cols="6">
                <v-tooltip top>
                  <template v-slot:activator="{ on }">
                    <v-btn v-on="on" small :loading="delLoading" icon color="warning" @click="deleteTag(item.id)">
                      <v-icon small>close</v-icon>
                    </v-btn>
                  </template>
                  <span>删除</span>
                </v-tooltip>
              </v-col>
            </v-row>
          </v-list-item-action>
        </v-list-item>
      </v-hover>
        </template>
    </v-list>
  </div>
</template>
<script>
import MemberTagsEdit from './MemberTagsEdit.vue'
export default {
  name: 'WxMemeberTags',
  components: { MemberTagsEdit },
  props: {
    value: {
      type: Number,
      default: null
    }
  },
  data: function () {
    return {
      // tagItems: [],
      createName: '',
      createLoading: false,
      createMenu: false,
      delLoading: false,
      loading: false
    }
  },
  created: function () {
    // this.fetchData()
  },
  computed: {
    tagItems: function() {
      return this.$store.state.wxtags.tags
    }
  },
  methods: {
    fetchData: function() {
      this.loading = true
      this.$store.dispatch('getTags').finally(() => {
        this.loading = false
      })
    },
    createTag: function() {
      this.createLoading = true
      this.$store.dispatch('createTag', this.createName).then(res => {
        this.$toasted.success(res)
        this.createMenu = false
      }).finally(() => {
        this.createLoading = false
      })
    },
    deleteTag: function(id) {
      this.delLoading = true
      this.$store.dispatch('deleteTag', id).then(res => {
        this.$toasted.success(res)
      }).finally(() => {
        this.delLoading = false
      })
    },
    selectTag: function(item) {
      this.$emit('input', parseInt(item.id))
    }
  }
}
</script>
<style scoped>
</style>
